<template>
  <article class="my-article">
    <v-card>
      <v-card-title primary-title>
        <div>
          <h3 class="headline mb-3" style="text-align: left">
            {{data.title}}
          </h3>
          <div class="article-info">
              <span>
                <v-icon>person</v-icon>
                shanjunpeng
              </span>
            <span>
                <v-icon>query_builder</v-icon>
                {{data.ctime | formatDate}}
              </span>
            <span>
                <v-icon>folder_open</v-icon>
                {{data.category || '无分类'}}
              </span>
          </div>
        </div>
      </v-card-title>
      <mavon-editor v-model="data.content" style="min-height: 300px;width: 100%"
                    :subfield="prop.subfield"
                    :defaultOpen="prop.defaultOpen"
                    :toolbarsFlag="prop.toolbarsFlag"
                    :editable="prop.editable"
                    :scrollStyle="prop.scrollStyle"
      />

      <v-card-actions>
        <div class="labels">
          <v-chip outline color="primary">aaaa cccc</v-chip>
          <v-chip outline color="primary">bbbbb</v-chip>
        </div>
      </v-card-actions>
    </v-card>
    <!--评论-->
    <comments ref="comments"/>
  </article>
</template>
<script type="text/ecmascript-6">
  import {detail} from '@/api/article';
  import Comments from './comments';

  export default {
    components: {
      Comments
    },
    data() {
      return {
        data: {},
        prop: {
          subfield: false,// 单双栏模式
          defaultOpen: 'preview',//edit： 默认展示编辑区域 ， preview： 默认展示预览区域
          editable: false,
          toolbarsFlag: false,
          scrollStyle: true
        }
      }
    },
    watch: {
      '$route.params.id': function (newValue, oldValue) {
        console.log(newValue, oldValue);
        if (newValue) {
          this.getDetail(newValue);
          this.$refs.comments.init();
        } else {
          this.form = {};
        }
      }
    },
    beforeMount() {
      this.getDetail(this.$route.params.id)
    },
    methods: {
      async getDetail(id) {
        this.data = await detail(id);

      }
    }


  }
</script>
